<!-- 资料录入与查询 -->
<template>
    <div class='p-queryDataEntry app-container'>
        <queryData-entrySearch v-model="form" :searchFunc="searchFunc" :clear="clear" :entry="entry"></queryData-entrySearch>
        <div class="list-wrapper" style="flex: 1;">
            <div class="content">
                <div class="title">
                    <span>项目资料列表</span>
                </div>
                <comm-table ref="dragTable" :loading="loading" :data="tableData" style="width: 100%">
                    <!-- <el-table-column width="80" type="selection" /> -->
                    <el-table-column prop="code" label="编号" width="70" />
                    <el-table-column prop="mcode" label="项目编码" width="100" />
                    <el-table-column prop="codename" label="设备编号" width="90" />
                    <el-table-column prop="peoplename" label="设计人" width="100" />
                    <el-table-column prop="zname" label="整理人" width="90" />
                    <el-table-column prop="creatdata" label="整理时间" width="140" />
                    <el-table-column prop="ramk" label="文件名称" width="190" />
                    <el-table-column prop="data" label="下载申请时间" width="140" />
                    <el-table-column prop="status" label="资料状态" width="90">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 1" class="tableStatus-pass">通过</div>
                            <div v-if="scope.row.status == 2" class="tableStatus-noPass">不通过</div>
                            <div v-if="scope.row.status == 3" class="tableStatus-audit">审核</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="90">
                        <template>
                            <span class="operation-btn" @click="goView">查看</span><br/>
                            <span class="operation-btn" @click="goEdit">修改</span><br/>
                            <span class="operation-btn" @click="goReason">查看原因</span>
                        </template>
                    </el-table-column>
                </comm-table>
            </div>
        </div>
        <div class="list-wrapper" style="flex: 1;">
            <div class="content">
                <div class="title">
                    <span>查询结果展示</span>
                </div>
                <ul class="flex-container">
                    <li class="flex-item" v-for="(item,i) in list" :key="i">
                        <img :src="item.img" alt="">
                        <div class="bott">
                            <p><span>模板分组：</span><span :title="item.a">{{item.a}}</span></p>
                            <p><span>项目编码：</span><span>{{item.b}}</span></p>
                            <p><span>设备编码：</span><span>{{item.c}}</span></p>
                            <p><span>设计人：</span><span>{{item.d}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                            <p><span>动力形式：</span><span>{{item.e}}</span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <v-dialog :title="dialogObj.title" :close-stattus="dialogObj.close" :handle-confirm-func="handleConfirm" :close-click-func="closeClick" :show-footer="true" :show.sync="dialogObj.visible">
            <template #content>
                <el-form ref="dialogObjForm" :rules="rules" :model="dialogObj.form" size="mini" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请选择模板分组">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-select v-model="dialogObj.form.categoryName" placeholder="请选择">
                                    <el-option v-for="(item,index) in groupingList" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="提交人">
                                <v-text v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <!-- <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" /> -->
                            </el-form-item>
                            <el-form-item label="项目编码">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="设备编码">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="设备名称">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="设计人">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="设计完成日期">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-date-picker v-model="dialogObj.form.categoryName" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="关键字">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="作业对象/工件">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="工作模式">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-select v-model="dialogObj.form.categoryName" placeholder="请选择">
                                    <el-option v-for="(item,index) in groupingList" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="动力模式">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-select v-model="dialogObj.form.categoryName" placeholder="请选择">
                                    <el-option v-for="(item,index) in groupingList" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="功能描述">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input type="textarea" placeholder="请输入内容" v-model="dialogObj.form.categoryName" maxlength="300" show-word-limit :autosize="{ minRows: 3, maxRows: 5}" />
                            </el-form-item>
                            <el-form-item label="操作/动作步骤">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input type="textarea" placeholder="请输入内容" v-model="dialogObj.form.categoryName" maxlength="300" show-word-limit :autosize="{ minRows: 3, maxRows: 5}" />
                            </el-form-item>
                            <el-form-item label="主要参数">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="整理人">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                            </el-form-item>
                            <el-form-item label="整理日期">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-date-picker v-model="dialogObj.form.categoryName" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="改善建议">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-input type="textarea" placeholder="请输入内容" v-model="dialogObj.form.categoryName" maxlength="300" show-word-limit :autosize="{ minRows: 3, maxRows: 5}" />
                            </el-form-item>
                            <el-form-item label="上传主要图片">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-upload
                                    class="avatar-uploader"
                                    action=""
                                    :show-file-list="false"
                                    :auto-upload="false"
                                    :on-change="mainHandlePictureCardPreview">
                                    <img v-if="mainImageUrl" :src="mainImageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="上传次要图片">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-upload
                                    action=""
                                    :limit="3"
                                    list-type="picture-card"
                                    :on-preview="secondaryHandlePictureCardPreview"
                                    :auto-upload="false"
                                    :on-remove="secondaryRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="secondaryVisible">
                                    <img width="100%" :src="secondaryImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="上传文件">
                                <v-text v-if="sty === 'view'" v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <el-upload
                                    class="upload-demo"
                                    action=""
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    multiple
                                    :limit="3"
                                    :auto-upload="false"
                                    :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="审核人">
                                <v-text v-model="dialogObj.form.categoryName" expandEnabled></v-text>
                                <!-- <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" /> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </v-dialog>
    </div>
</template>

<script>
    import TableCommMixin from '@/mixins/TableCommMixin'
    import queryDataEntrySearch from '../../modules/queryDataEntry-search.vue'
    import vDialog from '@/components/v-dialog.vue'
    import vText from '@/components/v-text.vue';
    import bus from '@/components/eventbus.js'
    export default {
        components: { vDialog, queryDataEntrySearch,vText },
        mixins: [TableCommMixin],
        data() {
            return {
                form:{},   //搜索条件
                tableData:[
                    {'code':'1','mcode':'654321','codename':'123456','status':1,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':2,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':3,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':1,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':1,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':1,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','mcode':'654321','codename':'123456','status':1,'peoplename':'管理员','mcode':'整理人','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'}
                ],
                list:[
                    {'img':'','a':'设备名称1设备名称1设备名称1设备名称1设备名称1设备名称1','b':'12345','c':'7654321','d':'设计者',"e":'电动'},
                    {'img':'','a':'设备名称1','b':'12345','c':'7654321','d':'设计者',"e":'电动'},
                    {'img':'','a':'设备名称1','b':'12345','c':'7654321','d':'设计者',"e":'电动'},
                    {'img':'','a':'设备名称1','b':'12345','c':'7654321','d':'设计者',"e":'电动'},
                    {'img':'','a':'设备名称1','b':'12345','c':'7654321','d':'设计者',"e":'电动'},
                ],
                sty: '',
                dialogObj: {  //弹窗
                    close: false,
                    title: '',
                    visible: false,
                    form: {},
                    confirmName: '确 定' // 修改提交文字，如不需要，可去掉:confirmName="dialogObj.confirmName"配置项
                },
                rules: {
                    // 校验规则
                },
                groupingList:[],//下拉数据
                mainImageUrl: '',   //主要图片
                secondaryImageUrl: '',   //次要图片
                secondaryVisible: false,  //次要图片
                fileLists:[],    //次要图片
                fileList:[],    //文件
            }
        },
        methods: {
            //搜索事件
            searchFunc() {
                // 查询触发函数，通过bus唤起getList。Author by clj. on 2020.4.18
                console.log(99)
            },
            //清空事件
            clear() {
                console.log(88)
            },
            //录入弹窗
            entry() {
                this.dialogObj.form = {};
                this.dialogObj.title = '资料录入';
                bus.$emit('sty','add');
                this.dialogObj.visible = true;
            },
            // 查看
            goView(row){
                this.dialogObj.form = {};
                this.dialogObj.title = ' 查看';
                bus.$emit('sty','view');
                this.dialogObj.visible = true;
            },
            // 编辑
            goEdit(row){
                this.dialogObj.form = {};
                this.dialogObj.title = '编辑';
                bus.$emit('sty','edit');
                this.dialogObj.visible = true;
                this.$nextTick(() => {
                    this.$refs['dialogObjForm'].clearValidate();
                })
            },
            // 查看原因
            goReason(row){
                this.dialogObj.form = {};
                this.dialogObj.title = '编辑';
                bus.$emit('sty','edit');
                this.dialogObj.visible = true;
                this.$nextTick(() => {
                    this.$refs['dialogObjForm'].clearValidate();
                })
            },
            // 保存
            handleConfirm(sty) {
                this.dialogObj.visible = false
                return
                if (sty === 'add') {
                    this.$refs['dialogObjForm'].validate(valid => {
                    if (valid) {
                        this.dialogObj.visible = false
                    } else {
                        return false
                    }
                    })
                } else if (sty === 'edit') {
                    this.dialogObj.visible = false
                }
            },
            // 关闭
            closeClick() {
                this.dialogObj.visible = false
            },
            //主要图片
            mainHandlePictureCardPreview(file) {
                this.mainImageUrl = URL.createObjectURL(file.raw);;
            },
            //次要图片
            secondaryRemove(file, fileList) {
                console.log(file, fileList);
            },
            secondaryHandlePictureCardPreview(file,fileList) {
                this.fileLists = fileList;
                this.secondaryImageUrl = file.url;
                this.secondaryVisible = true;
            },
            //文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        },
        mounted() {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-queryDataEntry {
        .list-wrapper {
            margin-top: 20px;
        }
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 36px 20px 20px;
        }
        .flex-container .flex-item {
            width: 335px;
            height: 384px;
            border-radius: 5px;
            border: 1px solid #ddd;
            margin:0 50px 23px 0;
            padding: 8px;
        }
        .flex-item:nth-child(3n+0) {
            margin-right: 0!important;
        }
        .flex-container img {
            display: block;
            width: 310px;
            height: 192px;
            margin: 0 auto;
            background-color: yellow;
        }
        .bott {
            width: 310px;
            margin: 10px auto;
            height: 170px;
            overflow: auto;
        }
        .bott p {
            color: #394662;
            height: 30px;
            line-height: 30px;
        }
        .bott p span:nth-child(1) {
            display: inline-block;
            width: 90px;
            min-width: 80px;
            font-weight: 700;
            float: left;
        }
        .bott p span:nth-child(2) {
            float: left;
            display: inline-block;
            width: 220px;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
</style>
